<template>
	<view class="bigView">
		<view class="topView">
			<view>{{currentUserName}}</view>
			<!-- <canvas id="qrcode" width="200" height="200"></canvas> -->
			<!-- <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;background-color: red;"></canvas> -->
		
					<!-- <canvas id="qrcode" width="200" height="200"></canvas> -->
			<canvas id="qrcode" canvas-id="qrcode" style="width: 150px;height: 150px;margin-top: 40rpx;"></canvas>
			<view @click="refreshHandle" style="margin-top: 20px;">刷新二维码</view>
		</view>
		<!-- <view class="bottomView" :style="[{height:bottom + 'px'}]">
			<view class="sure" @click="sureHandle">付款</view>
		</view> -->
	</view>
</template>

<script>
	import { isJZNull } from '../../utils/auth'
	import points from '@/api/points.js'
	import UQRCode from 'uqrcodejs';
	// import uQRCode from 'uqrcodejs';
	export default{
		data(){
			return {
				bottom:0,
				status:0,
				userInfo:{},
				form:{
					ruleSettings:'',
					userId:'',
				},
				currentUserName:'',
				canvasId: 'myQRCode',
				canvasSize: 200, // 二维码大小
				isPageActive: true  ,// 页面是否处于活跃状态
				isBreak:true,
				timer: null,
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
		},
		onLoad(options){
			if(options.shopId){
				this.shopId = options.shopId;
			}
			this.initUserInfo()
		},
		onUnload() {
			this.isPageActive = false;
			this.stopTimer()
		},
		methods:{
			startTimer() {
			  // 每 2 分钟执行一次
			  this.timer = setInterval(() => {
				this.refreshHandle()
				// console.log("刷新------")
			  }, 120000); // 120 秒 = 2 分钟
			},
			stopTimer() {
			  if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
				console.log('定时器已清除');
			  }
			},
			initUserInfo(){
				const userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = JSON.parse(userInfo);
					// this.form.userId = this.userInfo.id;
					if (this.userInfo.realName) {
						this.currentUserName = this.userInfo.realName
					}else if (this.userInfo.name) {
						this.currentUserName = this.userInfo.name
					} else{
						this.currentUserName = this.userInfo.phone
					}
					// setTimeout(()=>{
						this.isBreak = false;
						this.getCodeValue()
					// },500)
					// this.startTimer()
				}
				
				
			},
			refreshHandle(){
				this.isBreak = true;
				uni.showLoading({
					title:"正在刷新..."
				})
				// setTimeout(()=>{
					console.log("刷新")
					this.isBreak = false
					this.getCodeValue()
					console.log("结束任务")
				// },100)
				
				
			},
			async getCodeValue(){
				// 获取uQRCode实例
				var qr = new UQRCode();
				const timestamp13 = Date.now();
				let qrData = JSON.stringify({
					userId:this.userInfo.id,
					goodId: timestamp13
				})
				// 设置二维码内容
				qr.data = qrData;
				// console.log(qrData)
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 150;
				// if(isJZNull(this.userInfo.headPicUrl)){
					this.makeQR(qr,timestamp13)
				// }else{
				// 	let that = this;
				// 	uni.downloadFile({
				// 	  url: this.userInfo.headPicUrl, // 网络图片地址
				// 	  success: (res) => {
				// 	    if (res.statusCode === 200) {
				// 	      console.log('下载成功，临时路径:', res.tempFilePath);
				// 	      // 这里可以设置 foregroundImageSrc
				// 		  qr.foregroundImageSrc = res.tempFilePath;
				// 	    }
				// 		that.makeQR(qr,timestamp13)
				// 	  },
				// 	  fail: (err) => {
				// 	    console.error('下载失败:', err);
				// 		that.makeQR(qr,timestamp13)
				// 	  }
				// 	});
				// 	  // 设置二维码前景图，可以是路径
				// 	// qr.foregroundImageSrc = tempFilePath;
				// }
								
			},
			makeQR(qr,timestamp13){
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
				// setTimeout(()=>{
				// 	this.jumpPayResult(200,"测试店铺")
				// },1000)
				uni.hideLoading()
				this.paymentRecordsVerification(timestamp13)
			},
			paymentRecordsVerification(timestamp13){
				if(!this.isPageActive){
					return
				}
				if(this.isBreak){
					return
				}
				let that = this;
				points.paymentRecordsVerification({paymentNumber:timestamp13}).then(res=>{
					console.log(res)
					if(res){ 
						if (res.paymentStatus=='2'){//支付成功
							that.jumpPayResult(res.ruleSettings,res.shopName,res.createdAtView)
						}
						if(res.paymentStatus=='3'){//支付失败
							that.jumpPayResult2(res.failureReason)
						}
					}else{
						setTimeout(()=>{
							that.paymentRecordsVerification(timestamp13)
						},1000)	
					}
				}).catch(err=>{
					
				})
			},
			jumpPayResult(value,shopName,dateStr){
				uni.navigateTo({
					url: '/pageageMine/pages/userPayResult?ruleSettings='+value+'&shopName='+shopName+'&dateStr='+dateStr
				})
			},
			jumpPayResult2(value){
				uni.navigateTo({
					url: '/pageageMine/pages/userPayResult2?failureReason='+value
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #DEB655;
	display: flex;
	flex-direction: column;
	align-items: center;
	// justify-content: center;
}
.topView{
	margin-top: 198rpx;
	// flex-grow: 1;
	width: calc(100vw - 32rpx);
	height: 827rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	// margin-bottom: 120rpx;
}
</style>